<template>
  <a-card :bordered="false">
    <a-form :form="form">
      <a-form-item :label="$t('common.enable')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-switch
          :disabled="!canEdit"
          @change="handleStatusChange"
          v-decorator="['status', { valuePropName: 'checked' }]"
        />
      </a-form-item>

      <a-form-item :label="$t('platformManagement.app.serviceType')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-radio-group :disabled="!canEdit" v-decorator="['mailType']">
          <a-radio-button value="IMAP">IMAP</a-radio-button>
          <a-radio-button value="SMTP">SMTP</a-radio-button>
          <a-radio-button value="POP3">POP3</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item :label="$t('platformManagement.app.enableSSL')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-switch :disabled="!canEdit" v-decorator="['ssl', { valuePropName: 'checked' }]" />
      </a-form-item>

      <a-form-item :label="$t('platformManagement.app.host')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <s-input
          :disabled="!canEdit"
          v-decorator="[
            'host',
            {
              rules: [
                { required: isUsed, message: '主机名不能为空' },
                { pattern: HOST_REG, message: '请输入合法的ip或域名' }
              ]
            }
          ]"
          :limit="255"
        ></s-input>
      </a-form-item>

      <a-form-item :label="$t('platformManagement.app.port')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <s-input
          :disabled="!canEdit"
          v-decorator="[
            'port',
            {
              rules: [
                { required: isUsed, message: '端口不能为空' },
                { pattern: PORT_REG, message: '请输入合法的端口号(0~65535)' }
              ]
            }
          ]"
        ></s-input>
      </a-form-item>

      <a-form-item :label="$t('platformManagement.app.sendAccount')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <s-input
          :disabled="!canEdit"
          :limit="256"
          v-decorator="[
            'fromMail',
            {
              rules: [
                { required: isUsed, message: '发送账户不能为空', whitespace: isUsed },
                { type: 'email', message: '请输入合法的email地址' }
              ]
            }
          ]"
        ></s-input>
      </a-form-item>

      <a-form-item :label="$t('common.username')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <s-input
          :disabled="!canEdit"
          :limit="256"
          v-decorator="[
            'userName',
            {
              rules: [{ required: isUsed, message: '用户名不能为空', whitespace: isUsed }]
            }
          ]"
        ></s-input>
      </a-form-item>

      <a-form-item :label="$t('common.password')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input-password
          :disabled="!canEdit"
          :maxLength="128"
          v-decorator="[
            'password',
            {
              rules: [{ required: isUsed, message: '密码不能为空', whitespace: isUsed }]
            }
          ]"
        ></a-input-password>
      </a-form-item>

      <a-form-item v-action:update :colon="false" label=" " :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-button @click="handleReset">{{ $t('common.cancel') }}</a-button>
        <a-button style="margin-left: 20px" @click="handleSubmit" type="primary">{{ $t('common.submit') }}</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { getMailConfig, updateMailConfig } from '@/api/company'
import { SInput } from '@/components'
import { HOST_REG, PORT_REG } from '@/utils/regExp'
export default {
  name: 'MailConfig',
  created () {
    this.init()
  },
  components: {
    SInput
  },
  data () {
    return {
      form: this.$form.createForm(this),
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      isUsed: false,
      data: null,
      HOST_REG,
      PORT_REG,
      canEdit: this.$auth('update', this.$route.meta.permissionId)
    }
  },
  methods: {
    init () {
      getMailConfig({ appId: 0 }).then(res => {
        this.data = res.data || {}
        this.$nextTick(() => {
          const { status, mailType, ssl, host, port, fromMail, userName, password } = this.data
          this.form.setFieldsValue({
            status: !!status,
            mailType,
            ssl,
            host,
            port: port ? port.toString() : '',
            fromMail,
            userName,
            password
          })
          this.isUsed = !!status
        })
      })
    },
    handleStatusChange (checked) {
      this.isUsed = checked
    },
    handleSubmit () {
      this.form.validateFields((err, value) => {
        console.log(err, value)
        if (err) {
          return
        }
        const { id } = this.data
        const { status, mailType, ssl, host, port, fromMail, userName, password } = value

        updateMailConfig({
          id,
          appId: 0,
          status: status ? 1 : 0,
          mailType,
          host: host ? host.trim() : '',
          port: port ? port.trim() : '',
          fromMail: fromMail ? fromMail.trim() : '',
          userName: userName ? userName.trim() : '',
          password: password ? password.trim() : '',
          ssl: ssl,
          appId: 0
        }).then(res => {
          this.$message.success('修改邮件通知设置成功', 3)
        })
      })
    },
    handleReset () {
      this.init()
    }
  }
}
</script>

<style scoped>
.radio-style {
  display: block;
  height: 30px;
  line-height: 30px;
}
</style>
